<template>
  <div>
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      class="breadcrumb-base"
      style="line-height: 30px;"
    >
      <el-breadcrumb-item :to="{ path: '/example' }">
        <font-awesome-icon :icon="['fas', 'home']"></font-awesome-icon>
        样例页面
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        子页面
      </el-breadcrumb-item>
    </el-breadcrumb>

    <div class="main-container">
      <el-row class="line-text-title" type="flex" align="middle">
        <span class="title-medium text-important">标题</span>
      </el-row>

      <el-row class="line-text">
        <el-col :span="8">
          <span class="content-text">：{{}}</span>
        </el-col>
        <el-col :span="8">
          <span class="content-text">: {{}}</span>
        </el-col>
        <el-col :span="8">
          <span class="content-text">：{{}}</span>
        </el-col>
      </el-row>

      <el-form ref="exampleFormName" :model="exampleForm" label-width="80px">
        <el-row class="line-text-title" type="flex" align="middle">
          <span class="title-medium text-important">表单</span>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="输入" prop="wax">
              <el-input
                v-model="exampleForm.inputA"
                placeholder="请输入"
                class="input-form"
                size="mini"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="选择">
              <el-select
                v-model="exampleForm.selectA"
                placeholder="请选择"
                @change="exampleFormSelectChange"
                size="mini"
                class="picker-form"
              >
                <el-option
                  v-for="(data, index) in exampleSelectionData"
                  :key="index"
                  :label="data"
                  :value="index"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="输入" prop="wax">
              <el-input
                v-model="exampleForm.inputB"
                placeholder="请输入"
                class="input-form"
                size="mini"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="选择">
              <el-select
                v-model="exampleForm.selectB"
                placeholder="请选择"
                @change="exampleFormSelectChange"
                size="mini"
                class="picker-form"
              >
                <el-option
                  v-for="(data, index) in exampleSelectionData"
                  :key="index"
                  :label="data"
                  :value="index"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="单选项">
            <el-radio-group
              v-model="exampleForm.single"
              @change="exampleFormSelectChange"
              size="mini"
              class="radio-group"
            >
              <el-radio
                v-for="(t, index) in exampleRadioData"
                :label="index"
                :key="index"
                size="mini"
                >{{ t }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="多选框" ref="exampleFormMultiple">
            <el-checkbox
              :indeterminate="exampleFormMultiple.isIndeterminate"
              v-model="exampleFormMultiple.checkAll"
              @change="exampleFormMultipleCheckAll"
              style="display: inline;"
              >全选</el-checkbox
            >
            <el-checkbox-group
              v-model="exampleFormMultiple.checked"
              @change="exampleFormMultipleCheckChange"
              style="display: inline;"
            >
              <el-checkbox
                v-for="(t, index) in exampleMultipleData"
                :label="index"
                :key="index + 1"
                size="mini"
                >{{ t }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-row>
      </el-form>
      <el-row type="flex" justify="center">
        <el-button @click="exampleDialogOpen" type="primary" size="mini" style="margin: 0 10px"
          >打开对话框</el-button
        >
        <el-button @click="jumpBack" size="mini" style="margin: 0 10px">返回</el-button>
      </el-row>
      <el-row style="margin-top: 10px;">
        <base-table
          ref="exampleTable"
          v-loading="!exampleTable.isReady"
          :data="exampleTable.data"
          :header="exampleTable.header"
          :operation="exampleTable.operation"
          :pageInfo="exampleTable.pageInfo"
          :cellStyleFunc="exampleTableCellStyleFunc"
          :buttonVisibleFunc="exampleTableButtonVisibleFunc"
          :selected="true"
          :pageSizes="[5, 10, 15]"
          @selectedRow="exampleTableSelectedRow"
          @handleClick="exampleTableButtonClick"
          @pageJumpTo="exampleTablePageJumpTo"
          @sizeChange="exampleTableSizeChange"
        >
        </base-table>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-form ref="exampleUploadForm" v-model="exampleUploadForm" :inline="true">
          <el-form-item label="单张图片上传">
            <el-upload
              :action="imageServiceUploadURL"
              :on-success="exampleUploadHandleSuccess"
              :show-file-list="false"
              :drag="true"
            >
              <img
                v-if="exampleUploadForm.imgOneUrl"
                :src="imageServiceURL + exampleUploadForm.imgOneUrl"
                class="avatar-uploader-img"
                alt=""
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div slot="tip" class="el-upload__tip" style="margin-top: -15px">
                只能上传jpg/png/bmp文件
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="多张图片上传">
            <el-upload
              :action="imageServiceUploadURL"
              :on-remove="exampleUploadHandleRemove"
              :on-change="exampleUploadHandleRemove"
              :file-list="exampleUploadForm.fileList"
              :drag="true"
              list-type="picture-card"
            >
              <el-button size="mini" type="primary">
                点击上传
              </el-button>
              <div slot="tip" class="el-upload__tip" style="margin-top: -1px">
                只能上传jpg/png/bmp文件
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-row>
    </div>

    <el-dialog
      :title="exampleDialog.title"
      :visible.sync="exampleDialog.visible"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      append-to-body
      width="40%"
    >
      <span slot="footer" class="dialog-footer" style="text-align: right;">
        <el-button @click="exampleDialog.visible = false" size="mini">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import BaseTable from '@/templates/components/BaseTable'

export default {
  name: 'Example',
  components: {
    BaseTable
  },
  data() {
    return {
      // 图片服务器地址
      imageServiceURL: process.env.VUE_APP_ImageServiceURL,
      // 上传图片链接
      imageServiceUploadURL: `${process.env.VUE_APP_ImageServiceURL}/upload`,
      exampleForm: {
        inputA: '',
        inputB: '',
        selectA: '',
        selectB: ''
      },
      exampleSelectionData: ['Selection A', 'Selection B', 'Selection C', 'Selection D'],
      exampleRadioData: ['Radio A', 'Radio B', 'Radio C', 'Radio D'],
      exampleMultipleData: ['Multiple A', 'Multiple B', 'Multiple C', 'Multiple D'],

      exampleDialog: {
        visible: false,
        title: '范例对话框'
      },
      exampleTableBaseData: [
        {
          name: 'nameA',
          state: 'stateA',
          createAt: 'createA'
        },
        {
          name: 'nameB',
          state: 'stateB',
          createAt: 'createB'
        },
        {
          name: 'nameC',
          state: 'stateC',
          createAt: 'createC'
        },
        {
          name: 'nameD',
          state: 'stateD',
          createAt: 'createD'
        },
        {
          name: 'nameE',
          state: 'stateE',
          createAt: 'createE'
        },
        {
          name: 'nameF',
          state: 'stateF',
          createAt: 'createF'
        }
      ],
      exampleTable: {
        isReady: false,
        data: [],
        header: [
          {
            label: '名称',
            prop: 'name',
            width: '80'
          },
          {
            label: '状态',
            prop: 'state',
            isButton: true,
            functionKey: 'exampleTableFunctionC'
          },
          {
            label: '时间',
            prop: 'createAt'
          }
        ],
        operation: [
          {
            label: '按钮A',
            color: 'red',
            functionKey: 'exampleTableFunctionA'
          },
          {
            label: '按钮B',
            color: 'blue',
            functionKey: 'exampleTableFunctionB'
          }
        ],
        pageInfo: {
          page: 1,
          size: 15,
          total: 0
        }
      },
      exampleFormMultiple: {
        isIndeterminate: false,
        checkAll: false,
        checked: []
      },
      exampleUploadForm: {
        imgOneUrl: '',
        fileList: []
      },

      exampleExtraData: {
        count: 0
      }
    }
  },
  mounted() {
    this.exampleRequest()
    this.exampleTableDataGet()
  },
  computed: {},
  methods: {
    exampleFormSelectChange() {
      // 表单选择相关方法
      // console.log('exampleFormSelectChange');
    },
    exampleDialogOpen() {
      // 打开对话框调用的方法
      this.exampleDialog.visible = true
    },

    exampleTableSelectedRow() {
      // console.log('exampleTableSelectedRow', selectedRow);
    },
    exampleFormMultipleCheckAll(val) {
      const exampleMultipleDataLabelAll = [0, 1, 2, 3]
      this.exampleFormMultiple.checked = val ? exampleMultipleDataLabelAll : []
      this.exampleFormMultiple.isIndeterminate = false
    },
    exampleFormMultipleCheckChange(value) {
      const checkedCount = value.length
      this.exampleFormMultiple.checkAll = checkedCount === this.exampleMultipleData.length
      if (checkedCount > 0 && checkedCount < this.exampleMultipleData.length) {
        this.exampleFormMultiple.isIndeterminate = true
      } else {
        this.exampleFormMultiple.isIndeterminate = false
      }
    },
    exampleTableButtonClick(functionKey, row) {
      this[functionKey](row)
    },
    exampleTablePageJumpTo(val) {
      this.exampleTable.pageInfo.page = val
      // 为 exampleTable.data 赋值相应页上新数据
      this.exampleTableDataGet()
    },
    exampleTableSizeChange(val) {
      this.exampleTable.pageInfo.size = val
      // 为 exampleTable.data 赋值相应数据量新数据
      this.exampleTableDataGet()
    },
    exampleTableButtonVisibleFunc(key, row) {
      switch (key) {
        case 'exampleTableFunctionA':
          return row.state === 'stateD'
        case 'exampleTableFunctionB':
          return row.state !== 'stateD'
        default:
          return true
      }
    },
    exampleTableCellStyleFunc({ row, column }) {
      const baseStyle = {
        padding: '3px 0',
        'border-right': '1px solid #ffffff',
        'font-size': '14px'
      }
      if (row.state === 'stateA' && column.label === '状态' && this.exampleExtraData.count === 2) {
        baseStyle.color = 'red'
      }
      return baseStyle
    },
    exampleTableDataGet() {
      // 接口分页从 0 开始
      this.exampleTable.isReady = false
      this.exampleTable.pageInfo.total = this.exampleTableBaseData.length
      const { pageInfo } = this.exampleTable
      this.exampleTable.data = []
      this.exampleTableBaseData.forEach((t, i) => {
        if ((pageInfo.page - 1) * pageInfo.size <= i && pageInfo.page * pageInfo.size > i) {
          const item = t
          item.index = this.exampleTable.data.length
          this.exampleTable.data.push(item)
        }
      })
      this.exampleTable.isReady = true
    },
    exampleTableFunctionA(row) {
      this.exampleExtraData.count++
      console.log('exampleTableFunctionA', row)
    },
    exampleTableFunctionB(row) {
      this.exampleExtraData.count++
      console.log('exampleTableFunctionB', row)
    },
    exampleTableFunctionC(row) {
      this.exampleExtraData.count++
      console.log('exampleTableFunctionC', row)
    },

    // 图片把主机地址和路径分开，只保留路径,单个图片形式
    exampleUploadHandleSuccess(res) {
      if (res.status === 'success') {
        this.exampleUploadForm.imgOneUrl = res.url.slice(res.url.indexOf('_') - 1)
      }
    },
    // 图片把主机地址和路径分开，只保留路径,多个图片形式，既上传又更新
    exampleUploadHandleRemove(file, fileList) {
      let moreUrl = ''
      if (file.status === 'success') {
        fileList.forEach(ele => {
          if (ele.response) {
            moreUrl += `${ele.response.url.slice(ele.response.url.indexOf('_') - 1)}|`
          } else {
            moreUrl += `${ele.url.slice(ele.url.indexOf('_') - 1)}|`
          }
        })
      }
      console.log('moreUrl', moreUrl)
    },
    async exampleRequest() {
      try {
        await this.$axios({
          // 详见 axios 请求配置项
          method: 'GET',
          url: '/dictionary-type',
          params: {
            code: 'institution'
          }
        }).then(res => {
          // 请求失败
          if (res.data.code !== 200) {
            throw new Error(res.data)
          }

          // 请求成功
          // const result = res.data;
        })
      } catch (e) {
        // 跳出
      }
    },
    jumpBack() {
      this.$route.go(-1)
    }
  }
}
</script>

<style scoped></style>
